<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1_固定定位广告条</title>
    <style>
        .top{
            background-color: #5AA4AE;
            height: 120px;
            color: #fff;
            font-size: 30px;
            /* 使用固定定位 让广告条紧贴html顶部 */
            position: fixed;
            top: 0;
            /* 设置宽度为视口(viewport width)宽度的100% */
            width: 100vw;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #FFF799;
            left: 20px;
        }
        .right {
            background-color: #F35336;
            right: 20px;
        }
        .main {
            /* 让内容向下一点 不然会遮住部分文字 */
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ad, atque beatae, culpa dignissimos earum eius
            exercitationem hic id ipsa magnam necessitatibus nemo perferendis quo reprehenderit sed sint sunt tempore!
        </div>
        <div>Atque culpa deleniti, dolorem eius eligendi exercitationem facere fugiat illum ipsam laboriosam mollitia
            neque odit quas rem repudiandae sint sit sunt vero voluptate voluptates. Aut deleniti deserunt fugiat
            molestiae reprehenderit?
        </div>
        <div>Ab accusantium at cupiditate debitis dignissimos, ea eaque error et ex facere fuga itaque magnam minima
            modi nobis nostrum officia perspiciatis quidem quisquam reiciendis reprehenderit similique sit! Dolores,
            facilis, mollitia.
        </div>
        <div>Architecto aut autem dolor natus non sit. Adipisci ea in laborum minus saepe, sed! Aliquid architecto
            debitis harum illum impedit natus, nostrum perferendis? Dolorum excepturi officia reprehenderit sequi ut.
            Aperiam!
        </div>
        <div>Amet, nam similique. Beatae distinctio inventore natus nobis officiis quidem rerum similique sint tempore.
            Deserunt, quas quod? Accusantium deleniti dicta, harum hic maxime minima obcaecati quasi recusandae
            repudiandae saepe tempora!
        </div>
        <div>Asperiores id ipsam laboriosam, molestiae odio quaerat quo vel voluptatibus voluptatum. Aspernatur
            consequuntur culpa dolorem doloremque expedita magni molestiae quo sequi, sit voluptatem? Consectetur,
            nihil, nisi. Autem cupiditate facere voluptatem?
        </div>
        <div>Ad amet culpa dicta dolorum impedit nemo nobis totam veritatis? A, accusamus consectetur distinctio dolorem
            error esse fuga fugit laborum magnam placeat, porro quae sunt tenetur veritatis vero! Perferendis, quos.
        </div>
        <div>Accusamus aspernatur assumenda corporis cupiditate delectus doloribus dolorum esse id laborum quasi qui
            quos, rem repellat. Ab at incidunt quisquam rerum. Ab nobis possimus quisquam ratione recusandae sed sequi,
            suscipit?
        </div>
        <div>Alias autem commodi ea laborum neque omnis quos sapiente, temporibus! Beatae deserunt dolorem, doloremque
            ea eius fuga harum illum, inventore molestias pariatur repellendus rerum sit, sunt vel veniam. Impedit,
            reprehenderit.
        </div>
        <div>Alias aperiam at aut blanditiis consectetur cumque dolores dolorum, ducimus ea eum ex facere fuga hic illo
            in laudantium magnam mollitia nisi nulla officiis placeat provident reprehenderit sint suscipit
            voluptatibus!
        </div>
        <div>Accusantium aperiam consectetur dolore incidunt magnam nostrum, tempore. Aliquam autem ea eum illo
            quibusdam unde velit veniam veritatis. Ea ex excepturi facilis laboriosam modi mollitia odit sit tempora
            temporibus vitae!
        </div>
        <div>Accusamus asperiores atque aut blanditiis cumque deleniti, dignissimos dolor esse excepturi expedita harum
            illum, ipsum labore neque non perferendis provident quae quaerat quibusdam reiciendis rerum tempore velit
            vero vitae voluptate?
        </div>
        <div>Ad aspernatur aut corporis delectus distinctio dolore dolorum incidunt ipsa, laboriosam laborum magni
            maxime modi nisi odio quasi sunt temporibus veniam. Aliquid dicta dolorem eligendi explicabo quis temporibus
            tenetur totam?
        </div>
        <div>Atque autem consequatur distinctio dolore dolorem error et explicabo illum ipsa, iste laboriosam nam odio
            quos repellendus sint temporibus veritatis. Accusamus commodi excepturi impedit neque nihil officiis quasi,
            quos sed.
        </div>
        <div>Architecto delectus esse, et fugiat laudantium magni molestiae sit. Ab aliquam asperiores aut delectus
            eveniet harum ipsum maxime mollitia nobis non officiis praesentium provident quas quis quos sed, similique
            tenetur.
        </div>
        <div>Accusamus alias architecto blanditiis consequatur, cupiditate doloremque doloribus enim eum exercitationem
            impedit incidunt inventore ipsum labore mollitia nisi obcaecati provident quam quasi quidem ullam? Atque
            deserunt dignissimos tempore veritatis voluptas!
        </div>
        <div>Aperiam autem cupiditate delectus error fuga fugiat libero maiores, modi molestiae, nemo nobis odio officia
            pariatur perferendis porro quasi quos recusandae rem repellat reprehenderit similique sunt vel veritatis
            voluptas, voluptatem!
        </div>
        <div>Aliquid amet aut beatae consequuntur dolore dolorem, eius est ex facilis fugiat ipsum itaque laudantium
            magni molestias nam nulla officiis porro quam quasi quod tenetur ullam ut velit voluptas voluptate.
        </div>
        <div>Accusantium consequuntur dolorum facere id sit. Amet asperiores autem consequuntur, doloribus
            exercitationem facere nisi reiciendis reprehenderit temporibus unde? A dicta enim esse facilis modi
            obcaecati repellendus soluta? Laudantium, porro provident.
        </div>
        <div>Accusantium atque consectetur cum ducimus eius est expedita incidunt inventore iste magni, modi nam numquam
            perferendis quas sequi voluptatibus voluptatum. A beatae blanditiis dolor iusto magni, numquam odio omnis
            sequi.
        </div>
        <div>Autem, consectetur earum eligendi ipsum perferendis quas repellendus sapiente veniam? Accusantium aut
            delectus expedita quo repellendus soluta voluptas. Blanditiis dolore enim illo ipsum omnis sint. Atque culpa
            dolorem ducimus quas!
        </div>
        <div>Ipsam, laboriosam odio. Ab ad cumque cupiditate dolorem doloremque ducimus, explicabo illo in libero
            numquam odio quasi soluta voluptatibus. Ad commodi dolor dolores iste maxime officia quisquam quod sit,
            voluptates.
        </div>
        <div>Alias aspernatur corporis deleniti deserunt dolorem enim harum illum labore, necessitatibus non officiis
            optio quo reiciendis soluta vel velit, veritatis voluptatibus. Autem deserunt doloremque error
            exercitationem molestias nihil reprehenderit, velit.
        </div>
        <div>Earum eius expedita iste tempore temporibus? Accusamus animi, atque corporis deserunt error eveniet fugiat
            id ipsa, iste iusto minima mollitia nostrum quisquam saepe sapiente sed sequi sunt temporibus vel velit.
        </div>
        <div>A amet corporis, doloribus eaque earum modi necessitatibus nihil obcaecati praesentium qui quidem quis,
            quos rem, reprehenderit repudiandae rerum tempora tenetur voluptates? Accusantium ea esse veniam vitae
            voluptates. Excepturi, sint.
        </div>
        <div>Accusamus atque cumque ducimus, inventore optio possimus quibusdam totam! Aperiam commodi, dicta
            dignissimos dolore eaque enim excepturi nulla porro qui quia reiciendis repellat repellendus reprehenderit
            repudiandae temporibus totam veniam voluptates.
        </div>
        <div>Animi consectetur cum doloribus eaque eligendi fugit, nobis numquam? Consectetur incidunt ipsum natus omnis
            provident! Asperiores aspernatur beatae consectetur, culpa esse inventore obcaecati, odio perferendis
            placeat quas quibusdam saepe sequi.
        </div>
        <div>Commodi earum excepturi molestias necessitatibus neque, numquam optio porro quam quas quibusdam quos sint
            tempore? Adipisci architecto commodi dolorem, eaque earum eius explicabo, impedit non odit quidem sed unde,
            voluptatibus.
        </div>
        <div>Animi at culpa error esse exercitationem, fuga illum incidunt laboriosam magnam porro! Accusantium aperiam
            architecto, consectetur est eveniet illum, iure maxime minus modi nam placeat quibusdam quidem quo
            reiciendis, vitae.
        </div>
        <div>Animi dolore doloribus error expedita id ipsa itaque nesciunt quae quia, quo, quos, voluptatum. Accusamus
            cumque dignissimos ea expedita labore laudantium, nobis optio, provident, recusandae reiciendis sunt
            suscipit veritatis vitae.
        </div>
        <div>Animi fugiat illum iure officiis provident quae quidem! A alias aperiam assumenda autem dolor ea eaque eius
            facere, fugiat illum ipsam iste magni molestias odit pariatur quas rerum sint, vero!
        </div>
        <div>Ab accusamus ad dolor ea eveniet excepturi exercitationem expedita facere ipsa labore minima molestiae
            nihil nisi, officiis, porro quasi quidem quis quos repellat sit soluta ullam unde vitae voluptatem
            voluptates.
        </div>
        <div>Est quia quidem quod! Ab at consequatur deleniti, eligendi esse eum facere hic id impedit itaque iure
            laudantium natus nemo, quo quod ratione repellat sed tempora, ut vero voluptatem voluptatibus?
        </div>
        <div>Aut commodi deleniti deserunt enim exercitationem laudantium placeat quae quaerat ratione ullam. Assumenda,
            cum, deserunt eos incidunt ipsum laudantium magnam molestiae nobis omnis placeat porro repellendus, sequi
            totam unde ut!
        </div>
        <div>Eos natus quam ullam. Amet consectetur debitis ducimus enim exercitationem facilis hic, iure necessitatibus
            nemo officiis omnis quaerat ratione repellendus saepe temporibus? Ab aliquam autem commodi hic libero magnam
            quasi.
        </div>
        <div>Ad autem dicta, dolor dolore hic ipsam labore, laborum, laudantium nam nobis nostrum placeat quidem
            repellendus totam unde velit voluptatibus? Dignissimos expedita laboriosam maxime nam nesciunt quam
            repudiandae, sint velit.
        </div>
        <div>Beatae blanditiis cum impedit ipsum iusto laboriosam magni neque non nulla optio, saepe sequi sit ut vel
            voluptas, voluptates voluptatum! Aliquam assumenda expedita magni minus necessitatibus optio, perferendis
            perspiciatis tempore!
        </div>
        <div>Dignissimos eligendi est eum illum officiis quas recusandae reprehenderit. Consectetur consequuntur
            corporis dolorum fugiat hic. Aspernatur distinctio esse id magnam maxime, nam odio officiis ratione saepe
            unde voluptate voluptatem? Perspiciatis.
        </div>
        <div>Assumenda consectetur dolor dolore ea, fugit impedit labore odio possimus, rerum, sunt suscipit voluptates?
            Atque dicta, doloribus et id iure magnam nemo nesciunt nisi quaerat quia quisquam repellat velit voluptates!
        </div>
        <div>Autem deserunt excepturi natus nostrum perspiciatis porro repellendus suscipit. Accusamus ad autem earum
            eius, esse excepturi explicabo facere harum itaque, mollitia nam nihil possimus, quam quibusdam quisquam
            quos saepe tempora?
        </div>
        <div>Asperiores assumenda dolores laboriosam nostrum placeat quidem rem ut vero! A accusamus amet delectus
            quidem suscipit voluptatum? Earum odit, sint. Adipisci beatae debitis dicta eum necessitatibus neque
            perspiciatis temporibus voluptates.
        </div>
        <div>Aperiam architecto consequatur cupiditate debitis delectus distinctio et facilis fugiat inventore iure
            iusto laboriosam libero molestiae nam natus neque nihil nobis optio quae, quas quos repellendus rerum sunt
            voluptate voluptatem?
        </div>
        <div>Autem cumque dolor, dolores est fuga maxime odio quidem? Cum distinctio dolores ducimus et expedita magnam
            molestiae mollitia odio omnis quaerat, quod repellendus, rerum similique. Aliquid ducimus reiciendis
            sapiente soluta.
        </div>
        <div>Accusamus assumenda commodi consectetur cupiditate, dolor doloremque dolores earum eligendi fugit harum
            illo, itaque iusto magnam maiores neque non, officiis possimus quidem quo reiciendis saepe sapiente totam
            ullam veritatis vitae.
        </div>
        <div>Adipisci assumenda aut corporis, culpa dolores dolorum earum eos est expedita fugit impedit in, ipsa ipsam
            molestias nam officiis perspiciatis quas quibusdam repellat sed? Animi at commodi laborum magni officia.
        </div>
        <div>Ab doloribus ducimus est exercitationem hic laborum minus quasi quos sit, suscipit tempora tenetur.
            Accusamus deleniti dolor doloremque eligendi eveniet excepturi iste numquam placeat sequi tenetur. Cumque
            odit quos tempore.
        </div>
        <div>Accusantium blanditiis commodi, dolore exercitationem fuga ipsa itaque nam provident quidem quis, sed vitae
            voluptate voluptatum. Cupiditate excepturi illum impedit officia quam suscipit. Aperiam consectetur nostrum
            officiis pariatur quos vitae.
        </div>
        <div>Accusamus amet architecto commodi consequuntur cum, dolorum et, ipsa ipsum iure laborum magnam nam nostrum
            perspiciatis possimus reprehenderit sed tempora totam? Atque earum facilis id ipsum quasi sed similique
            veritatis?
        </div>
        <div>A aliquid assumenda blanditiis delectus deserunt eaque fuga fugiat illo in laboriosam magnam, modi
            molestiae nam odio perferendis porro quasi quia, ratione recusandae saepe sapiente voluptas voluptatem.
            Fugit, officiis porro?
        </div>
        <div>Accusantium aliquam aliquid animi blanditiis consequatur cupiditate distinctio eaque earum eligendi et eum
            excepturi fugit impedit, iure maxime, nesciunt nobis nulla placeat porro quam qui quia quis repellat tempore
            temporibus.
        </div>
        <div>Cupiditate deleniti earum, eius expedita hic impedit mollitia perspiciatis quasi saepe velit. Aut beatae
            deserunt error harum illum iusto laboriosam, nemo neque non quibusdam ratione suscipit tenetur ullam velit,
            veritatis?
        </div>
        <div>Alias aliquid aspernatur assumenda, atque cumque dignissimos eaque enim exercitationem expedita facere fuga
            harum ipsa itaque laborum molestiae necessitatibus odit porro quasi quia quis repudiandae sunt totam, ut
            vitae, voluptates?
        </div>
        <div>Aut consequuntur delectus distinctio dolor enim esse est iusto laboriosam voluptas. Animi at beatae
            deleniti dolore dolores, fuga fugiat minus nisi pariatur perferendis placeat rem, saepe sequi vitae voluptas
            voluptatum?
        </div>
        <div>At, aut beatae ducimus eligendi illum ipsum iste libero, natus neque nulla, porro repudiandae ullam
            voluptatem. Debitis delectus dolorem dolores ducimus in, nemo officia pariatur quod ratione, repellat soluta
            sunt.
        </div>
        <div>Deleniti dolorem ea eaque fugiat magni, non optio, praesentium quam quisquam ratione similique totam ullam
            vel, veniam voluptatum! Corporis facere impedit neque placeat praesentium qui vitae voluptatem. Delectus,
            quis, similique!
        </div>
        <div>Doloremque libero reprehenderit vero. Ab accusamus adipisci aliquid assumenda beatae consectetur cumque
            delectus deleniti eaque eveniet excepturi laboriosam magnam, maxime molestiae, nisi odio quae reiciendis sit
            tempora vero voluptas voluptatem.
        </div>
        <div>Accusamus adipisci alias, aspernatur atque facere fugit iure libero, maxime omnis possimus, provident quasi
            sunt temporibus. A distinctio eos esse eveniet libero maxime, minus, nobis officiis, qui rem tenetur vero?
        </div>
        <div>Adipisci aut autem culpa dolor eum eveniet exercitationem expedita id maxime minus natus neque possimus
            quasi qui quod quos ratione repellendus, sed sint tempora tempore vel veritatis vitae voluptates
            voluptatibus?
        </div>
        <div>A ab accusamus fugiat, ipsam nisi sit voluptas! Accusantium adipisci consectetur debitis, distinctio dolor
            eligendi eos eveniet expedita harum inventore nobis praesentium quis reprehenderit similique sunt, ut, velit
            veniam voluptate!
        </div>
        <div>Aliquid atque corporis culpa cumque dolores eius enim, eum eveniet explicabo facere fugit harum laborum
            maxime, minus molestias numquam perspiciatis quam quia sequi sit tempora tempore tenetur totam. Cumque,
            natus.
        </div>
    </div>
</body>
</html>